<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>料事如神天气系统网页制作</title>
    <style>
        .one {
            width: 1200px;
            height: 600px;
            /* border: 1px solid yellowgreen; */
            border-radius: 10px;

        }

        .one1 {
            width: 1200px;
            height: 50px;
            border: 1px solid red;
            background-color: rgb(0, 136, 255);
            border-radius: 10px;
            padding-top: 20px;

        }

        .one1 a {
            color: white;
            margin-left: 60px;
            padding-left: 33px;
        }

    
        .one2 img {
            width: 500px;
            padding-left: 0px;
            margin-left: -40px;
        }
        .one2_block {
            display: block;
            padding-top: 9px;
            margin-right: -38px;
            margin-left: 71px;
            font-size: 25px;
            border: 2px solid whitesmoke;
            border-radius: 20px;
            height: 40px;
            margin-top: 38px;
            margin-left: 95px;
        }

        .one2 div {
            margin: auto;
            display: block;
            padding-top: 9px;
       
        }

        .one2 div a {
            column-rule-color: rgba(0, 0, 0, 0.853);
            padding-top: 20px;
            padding-top: 9px;
        
        }
        .one3 {
            display: block;
            width: 100px;
            margin-left: 174px;
            border-radius: 15px;
            padding-left: 48px;
            padding-right: -28px;
            font-size: 20px;
            border: 1px solid whitesmoke;
        }
        .one4 {
            display: block;
            display: flex;
            margin: auto;
            margin-top: -300px;
            margin-left: 620px;

        }
    </style>
</head>

<body>
    <div class="one">
        <div class="one1">
            <a href="">首页</a>
            <a href="">预报</a>
            <a href="">雷达</a>
            <a href="">云图</a>
            <a href="">天气地图</a>
            <a href="">节气</a>
            <a href="">我的天空</a>
            <a href="">更多</a>
        </div>
        <div>
            <class="one2">
                <div style="display: flex;">
                    <img src="./1.png">
                    <div class="one2_block">
                        <a href="">全国</a>
                        <a href="">东北</a>
                        <a href="">华北</a>
                        <a href="">西北</a>
                        <a href="">西南</a>
                        <a href="">华中</a>
                        <a href="">华东</a>
                        <a href="">华南</a>
                    </div>
                </div>
        </div>
        <div class="one3">
            <!-- <p <a href="">雷达</a> > </p>
            <p <a href=""></a> >云图</p>                                                                                                                                                                                                                                                                                                                                                                                 </p>
            <p <a href=""></a> >风水场</p>
            <p <a href=""></a> >降水</p>
            <p <a href=""></a> >气温</p>
            <p <a href=""></a> >相对湿度</p> -->
            <p><a href="">雷达</a></p>
            <p><a href="">云图</a></p>
            <p><a href="">风水场</a></p>
            <p><a href="">降水</a></p>
            <p><a href="">气温</a></p>
            <p><a href="">相对湿度</a></p>


            

            
        </div>
        <div class="one4">
            <img src="./2.jpg" width="450px" height="330px">
        </div>
</body>

</html>